📱 響應式設計：使用 Media Query

響應式網頁設計 (RWD) 旨在讓網頁內容能根據用戶使用的設備（手機、平板、桌面）自動調整佈局和外觀，確保最佳的瀏覽體驗。

啟用 Media Query 的兩大關鍵步驟

要讓 Media Query 正常運作並實現響應式效果，必須同時完成以下兩個步驟：

1. 設定 Viewport Meta Tag (HTML 區塊)

這是啟用響應式設計的**首要且最關鍵步驟**。請確保您的 HTML 檔案（在 <head> 區塊內）包含以下標籤，它告訴瀏覽器將頁面寬度設為設備的實際寬度：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2. 使用 `@media` 規則 (CSS 區塊)

在您的 CSS 檔案或 <style> 區塊中，使用 @media 規則來設定條件式樣式。當滿足特定條件（如螢幕寬度）時，該樣式才會被套用。

範例：在 CSS 檔案內使用 (最常見)

目標：讓標題在桌面時為藍色，手機時為紅色。

/* 預設樣式：適用於所有裝置（手機優先） */
.title {
  color: red; 
}

/* Media Query：當螢幕寬度達到 768px 或以上時 */
@media (min-width: 768px) {
  .title {
    color: blue; /* 樣式覆寫 */
  }
}

其他啟用方式：透過 HTML 載入條件式 CSS 檔案

<link rel="stylesheet" href="desktop.css" media="screen and (min-width: 992px)">

<link rel="stylesheet" href="print.css" media="print">

Media Query 核心：斷點 (Breakpoint)

Media Query 允許您根據設備的特性（如螢幕寬度、高度或方向）應用不同的 CSS 樣式。

最常用的斷點 (Breakpoint) 類型

查詢語句	設備範圍	用途描述
`@media (max-width: 640px)`	小於等於 640px (手機)	專為小螢幕設計的樣式。
`@media (min-width: 768px)`	大於等於 768px (平板/桌面)	從小螢幕的基礎樣式開始，向上擴展樣式。

實戰範例：根據螢幕寬度改變樣式

以下這個 Box 會根據您的瀏覽器寬度改變背景顏色、文字大小和邊框顏色。這就是 Media Query 的實際效果。

**操作提示：** 請嘗試縮放瀏覽器寬度，觀察 Box 的樣式變化。

這段文字會隨著螢幕大小而改變樣式！

範例使用的 CSS 程式碼 (Mobile First 策略)

/* 1. 預設樣式 (小螢幕，手機優先，紅色) */
.responsive-box {
    background-color: #ffcccc; 
    font-size: 1.2rem;
}

/* 2. 平板/中等螢幕的斷點設定 (768px 以上，橙色) */
@media (min-width: 768px) {
    .responsive-box {
        background-color: #ffedcc; 
        font-size: 1.5rem;
    }
}

/* 3. 桌面/大螢幕的斷點設定 (1200px 以上，綠色) */
@media (min-width: 1200px) {
    .responsive-box {
        background-color: #ccffcc; 
        font-size: 1.8rem;
    }
}